<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function clickAll(){
                //获取all的DOM对象
                var all=document.getElementById("all");

                //获取tbody中的所有的input的集合
                var inputs=document.querySelectorAll("tbody input");
                if(all.checked){//判断全选按钮是否被选中
                    for(var i=0;i<inputs.length;i++){
                        inputs[i].checked=true;
                    }
                }else{
                    for(var i=0;i<inputs.length;i++){
                        inputs[i].checked=false;
                    }
                }
            }

            function clickOne(){
                var inputs=document.querySelectorAll("tbody input");
                var all=document.getElementById("all");
                // if(inputs[0].checked && inputs[1].checked && inputs[2].checked && inputs[3].checked){
                //     all.checked=true;
                // }else{
                //     all.checked=false;
                // }
                var count=0;
                for(var i=0;i<inputs.length;i++){
                    if(inputs[i].checked){//挨个去查找，是否被选中，如果被选中，数量+1
                        count++;
                    }
                }
                //被选中的个数和tbody中的复选框的个数相同
                if (count==inputs.length) {
                    all.checked=true;
                }else{
                    all.checked=false;
                }


            }
        </script>

    </head>
    <body>
        <table border="1" width="500">
            <thead>
                <tr>
                    <th>
                        全选
                        <input type="checkbox"  id="all" onclick="clickAll()">
                    </th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody align="center">
                <tr>
                    <td>
                        <input type="checkbox" onclick="clickOne()">
                    </td>
                    <td>alice1</td>
                    <td>20</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" onclick="clickOne()">
                    </td>
                    <td>alice2</td>
                    <td>20</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" onclick="clickOne()">
                    </td>
                    <td>alice3</td>
                    <td>20</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" onclick="clickOne()">
                    </td>
                    <td>alice4</td>
                    <td>20</td>
                    <td>女</td>
                </tr>
            </tbody>
        </table>
        <script>
            // DOM.checked  获取checked属性值
            // DOM.checked=值
            // document.getElementById("all").checked=true;//设置谁被选中
        </script>
    </body>
</html>